<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="papaparse.min.js"></script>
    <script src="uikit.min.js"></script>
    <link rel="stylesheet" href="uikit.min.css">
</head>

<body>
    <div class="uk-container">
        <div id="configsBox" class="uk-flex uk-flex-around">
            <div id="conf0">1</div>
            <div id="conf1">2</div>
        </div>
        <hr/>
        <div id="funBox">
            <ul uk-tab>
                <li><a href="#">CSV &rarr; JSON</a></li>
                <li><a href="#">JSON &rarr; CSV</a></li>
                <li><a href="#">CSV &rarr; JSON(文件)</a></li>
                <li><a href="#">JSON &rarr; CSV(文件)</a></li>
            </ul>
            <div class="uk-switcher uk-margin">
                <div>
                    <label for="">
                        <button class="uk-button uk-button-default uk-width-1-1 uk-button-primary">CSV 转 JSON</button>
                        <br>
                        CSV文本内容:
                        <textarea name="" id="" rows="10" class="uk-textarea"></textarea>
                    </label>
                </div>
                <div>
                    <label for="">
                        <button class="uk-button uk-button-default uk-width-1-1 uk-button-primary">JSON 转 CSV</button>
                        <br>
                        JSON文本内容:
                        <textarea name="" id="" rows="10" class="uk-textarea"></textarea>
                    </label>
                </div>
                <div>
                    <div>
                        <div class="js-upload uk-placeholder uk-text-center">
                            <span uk-icon="icon: cloud-upload"></span>
                            <span class="uk-text-middle">Attach binaries by dropping them here or</span>
                            <div uk-form-custom>
                                <input type="file" multiple>
                                <span class="uk-link">selecting one</span>
                            </div>
                        </div>

                        <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
                        <script>

                            var bar = document.getElementById('js-progressbar');

                            UIkit.upload('.js-upload', {

                                url: '',
                                multiple: true,

                                beforeSend: function () {
                                    console.log('beforeSend', arguments);
                                },
                                beforeAll: function () {
                                    console.log('beforeAll', arguments);
                                },
                                load: function () {
                                    console.log('load', arguments);
                                },
                                error: function () {
                                    console.log('error', arguments);
                                },
                                complete: function () {
                                    console.log('complete', arguments);
                                },

                                loadStart: function (e) {
                                    console.log('loadStart', arguments);

                                    bar.removeAttribute('hidden');
                                    bar.max = e.total;
                                    bar.value = e.loaded;
                                },

                                progress: function (e) {
                                    console.log('progress', arguments);

                                    bar.max = e.total;
                                    bar.value = e.loaded;
                                },

                                loadEnd: function (e) {
                                    console.log('loadEnd', arguments);

                                    bar.max = e.total;
                                    bar.value = e.loaded;
                                },

                                completeAll: function () {
                                    console.log('completeAll', arguments);

                                    setTimeout(function () {
                                        bar.setAttribute('hidden', 'hidden');
                                    }, 1000);

                                    alert('Upload Completed');
                                }

                            });

                        </script>
                    </div>
                    <div id="c2j-download">
                        <input type="url" name="" id="" class="uk-input">
                    </div>
                </div>
                <div></div>

            </div>
        </div>
    </div>
    <style>
        #configsBox {
            display: flex;
            flex-direction: row;
        }
    </style>
</body>

</html>